<template>
	<view class="detail-container">
		<!-- 顶部地点信息 -->
		<view class="location-header">
			<view class="header-content">
				<text class="location-name">{{ locationInfo.name }}</text>
				<view class="rating-section">
					<view class="rating-stars">
						<text
							v-for="i in 5"
							:key="i"
							class="star"
							:class="{ 'filled': i <= Math.round(locationInfo.avgRating) }"
						>
							★
						</text>
					</view>
					<text class="rating-value">{{ locationInfo.avgRating || '暂无评分' }}</text>
					<text class="rating-count">({{ locationInfo.ratingsCount || 0 }}人)</text>
				</view>
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tabs">
			<view
				v-for="(tab, index) in tabs"
				:key="index"
				class="tab-item"
				:class="{ 'active': currentTab === index }"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{ tab }}</text>
			</view>
		</view>

		<!-- 内容区 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- Tab 0: 推荐菜品 -->
			<view v-show="currentTab === 0" class="tab-content">
				<view v-if="dishes.length > 0" class="dishes-list">
					<view v-for="dish in dishes" :key="dish.id" class="dish-item">
						<!-- 菜品图片 -->
						<image
							v-if="dish.imageUrl"
							:src="getFullImageUrl(dish.imageUrl)"
							class="dish-image"
							mode="aspectFill"
							@tap="previewImage(dish.imageUrl)"
						/>
						<view v-else class="dish-image-placeholder">
							<text>暂无图片</text>
						</view>

						<view class="dish-info">
							<text class="dish-name">{{ dish.dishName }}</text>
							<view class="dish-meta">
								<text v-if="dish.floor" class="dish-floor">{{ dish.floor }}</text>
								<text v-if="dish.price" class="dish-price">¥{{ dish.price }}</text>
							</view>
							<text class="dish-author">by {{ dish.user?.nickname || '匿名' }}</text>
						</view>
					</view>
				</view>
				<view v-else class="empty-state">
					<text class="empty-icon">🍽️</text>
					<text class="empty-text">暂无推荐菜品</text>
					<text class="empty-hint">快来推荐你喜欢的菜品吧!</text>
				</view>

				<!-- 添加推荐菜品按钮 -->
				<button class="add-dish-btn" @tap="showAddDishForm">
					+ 添加推荐菜品
				</button>
			</view>

			<!-- Tab 1: 拥挤度 -->
			<view v-show="currentTab === 1" class="tab-content">
				<!-- 24小时拥挤度图表 -->
				<congestion-chart
					:data="hourlyChartData"
					title="24小时拥挤度趋势"
				></congestion-chart>

				<!-- 原有的时段拥挤度列表 -->
				<view class="period-title">各时段平均拥挤度</view>
				<view v-if="congestion.length > 0" class="congestion-list">
					<view v-for="item in congestion" :key="item.timePeriod" class="congestion-item">
						<view class="congestion-header">
							<text class="period-name">{{ getPeriodName(item.timePeriod) }}</text>
							<text class="level-text">{{ getLevelText(item.level) }}</text>
						</view>
						<view class="level-bar">
							<view
								class="level-fill"
								:style="{ width: (item.level * 20) + '%' }"
								:class="getLevelClass(item.level)"
							></view>
						</view>
					</view>
				</view>
				<view v-else class="empty-state">
					<text class="empty-icon">📊</text>
					<text class="empty-text">暂无拥挤度数据</text>
				</view>
			</view>

			<!-- Tab 2: 我的评分 -->
			<view v-show="currentTab === 2" class="tab-content">
				<view class="my-rating-section">
					<text class="section-title">为这个地点评分</text>

					<!-- 星级评分 -->
					<view class="star-rating">
						<text
							v-for="i in 5"
							:key="i"
							class="rating-star"
							:class="{ 'active': i <= tempRating }"
							@tap="handleStarTap(i)"
						>
							★
						</text>
					</view>

					<text class="rating-hint">点击星星进行评分 ({{ tempRating }}分)</text>

					<!-- 提交按钮 -->
					<button
						class="submit-rating-btn"
						:disabled="tempRating === 0 || isSubmitting"
						@tap="submitRating"
					>
						{{ isSubmitting ? '提交中...' : '提交评分' }}
					</button>

					<!-- 当前评分 -->
					<view v-if="myRating" class="current-rating">
						<text class="rating-label">你的当前评分:</text>
						<text class="rating-score">{{ myRating.score }} 分</text>
						<button class="delete-rating-btn" @tap="deleteMyRating">
							删除评分
						</button>
					</view>
				</view>
			</view>

			<!-- Tab 3: 其他信息 -->
			<view v-show="currentTab === 3" class="tab-content campus-bg">
				<!-- 顶部装饰 -->
				<view class="campus-header">
					<view class="header-deco">
						<text class="deco-icon">📢</text>
						<text class="header-title">校园小贴士</text>
					</view>
					<text class="header-subtitle">来自管理员的温馨提示</text>
				</view>

				<!-- 备注列表 -->
				<view v-if="adminNotes.length > 0" class="notes-list">
					<view v-for="(note, index) in adminNotes" :key="index" class="note-card">
						<view class="note-header">
							<view class="note-badge">
								<text class="badge-icon">{{ note.icon }}</text>
							</view>
							<text class="note-category">{{ note.category }}</text>
						</view>
						<view class="note-body">
							<text class="note-text">{{ note.content }}</text>
						</view>
						<view class="note-footer">
							<text class="note-time">{{ note.time }}</text>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-else class="empty-campus">
					<view class="empty-decoration">
						<text class="empty-icon-large">🎓</text>
						<view class="empty-dots">
							<view class="dot"></view>
							<view class="dot"></view>
							<view class="dot"></view>
						</view>
					</view>
					<text class="empty-title">暂无校园提示</text>
					<text class="empty-desc">管理员还没有发布任何提示哦~</text>
				</view>
			</view>
		</scroll-view>

		<!-- 添加菜品弹窗 -->
		<view v-if="showDishForm" class="modal-overlay" @tap="closeDishForm">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加推荐菜品</text>
					<view class="modal-close" @tap="closeDishForm">
						<text>✕</text>
					</view>
				</view>

				<view class="form-body">
					<!-- 图片上传 -->
					<view class="form-item">
						<text class="form-label">菜品图片</text>
						<view class="upload-wrapper">
							<view v-if="dishForm.imageUrl" class="image-preview">
								<image :src="dishForm.imageUrl" mode="aspectFill" />
								<view class="delete-btn" @tap="removeImage">
									<text>×</text>
								</view>
							</view>
							<view v-else class="upload-btn" @tap="chooseImage">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传图片</text>
							</view>
						</view>
						<text class="upload-tip">支持 jpg、png、gif、webp 格式，最大 5MB</text>
					</view>

					<view class="form-item">
						<text class="form-label">菜品名称 *</text>
						<input
							class="form-input"
							v-model="dishForm.dishName"
							placeholder="请输入菜品名称"
							maxlength="50"
						/>
					</view>

					<view class="form-item">
						<text class="form-label">售卖楼层</text>
						<input
							class="form-input"
							v-model="dishForm.floor"
							placeholder="例如: 一楼、二楼西侧"
							maxlength="20"
						/>
					</view>

					<view class="form-item">
						<text class="form-label">价格 (元)</text>
						<input
							class="form-input"
							v-model="dishForm.price"
							type="digit"
							placeholder="请输入价格"
						/>
					</view>

					<button
						class="submit-btn"
						:disabled="!dishForm.dishName || isSubmitting"
						@tap="submitDish"
					>
						{{ isSubmitting ? '提交中...' : '提交' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { locationAPI, ratingAPI, utils, API_BASE_URL, API_ORIGIN } from '@/utils/api.js'
import CongestionChart from '@/components/congestion-chart/congestion-chart.vue'

export default {
	components: {
		CongestionChart
	},
	data() {
		return {
			locationId: null,
			locationInfo: {
				name: '',
				avgRating: 0,
				ratingsCount: 0
			},
			tabs: ['推荐菜品', '拥挤度', '我的评分', '其他信息'],
			currentTab: 0,

			// 菜品数据
			dishes: [],

			// 拥挤度数据
			congestion: [],

			// 我的评分
			myRating: null,
			tempRating: 0,

			// 添加菜品表单
			showDishForm: false,
			dishForm: {
				dishName: '',
				floor: '',
				price: '',
				imageUrl: '', // 本地临时路径
				imageFile: null // 文件对象
			},

			isSubmitting: false,

			// API基础URL
			apiBaseUrl: API_BASE_URL,
			assetBaseUrl: API_ORIGIN
		}
	},

	computed: {
		/**
		 * 解析管理员备注为多条记录
		 */
		adminNotes() {
			if (!this.locationInfo.adminNote) return []

			// 解析备注文本为多条记录
			const noteText = this.locationInfo.adminNote.trim()
			const lines = noteText.split('\n').filter(line => line.trim())

			// 定义分类到图标的映射
			const categoryMap = {
				'美食推荐': '🍴',
				'优惠活动': '💰',
				'营业时间': '⏰',
				'温馨提示': '⚠️',
				'位置信息': '📍'
			}

			return lines.map((line, index) => {
				// 尝试解析 "分类:内容" 格式
				const colonIndex = line.indexOf(':')

				if (colonIndex > 0) {
					const category = line.substring(0, colonIndex).trim()
					const content = line.substring(colonIndex + 1).trim()

					// 如果分类存在于映射表中，使用分类
					if (categoryMap[category]) {
						return {
							icon: categoryMap[category],
							category: category,
							content: content,
							time: '刚刚更新'
						}
					}
				}

				// 如果没有分类前缀，使用关键词匹配
				const noteTypes = [
					{ keywords: ['推荐', '必吃', '好吃', '美食'], icon: '🍴', category: '美食推荐' },
					{ keywords: ['优惠', '折扣', '活动', '特价'], icon: '💰', category: '优惠活动' },
					{ keywords: ['时间', '营业', '开放', '休息'], icon: '⏰', category: '营业时间' },
					{ keywords: ['注意', '提醒', '小心', '当心'], icon: '⚠️', category: '温馨提示' },
					{ keywords: ['位置', '地点', '楼层'], icon: '📍', category: '位置信息' }
				]

				let matched = noteTypes[4] // 默认为位置信息
				for (const type of noteTypes) {
					if (type.keywords.some(keyword => line.includes(keyword))) {
						matched = type
						break
					}
				}

				return {
					icon: matched.icon,
					category: matched.category,
					content: line,
					time: '刚刚更新'
				}
			})
		},

		/**
		 * 生成24小时拥挤度图表数据（前端模拟）
		 */
		hourlyChartData() {
			// 基于后端时段数据生成24小时模拟数据
			const hourlyData = []

			// 定义时段到小时的映射
			const periodHours = {
				BREAKFAST: [6, 7, 8, 9, 10],      // 早餐: 6:00-10:00
				LUNCH: [11, 12, 13, 14],          // 午餐: 11:00-14:00
				DINNER: [17, 18, 19, 20],         // 晚餐: 17:00-20:00
				OTHER: [0, 1, 2, 3, 4, 5, 15, 16, 21, 22, 23] // 其他时段
			}

			// 获取各时段的拥挤度
			const periodLevels = {}
			this.congestion.forEach(item => {
				periodLevels[item.timePeriod] = item.level
			})

			// 为24小时生成数据
			for (let hour = 0; hour < 24; hour++) {
				let baseLevel = 2 // 默认拥挤度

				// 根据时段设置基础拥挤度
				if (periodHours.BREAKFAST.includes(hour) && periodLevels.BREAKFAST) {
					baseLevel = periodLevels.BREAKFAST
				} else if (periodHours.LUNCH.includes(hour) && periodLevels.LUNCH) {
					baseLevel = periodLevels.LUNCH
				} else if (periodHours.DINNER.includes(hour) && periodLevels.DINNER) {
					baseLevel = periodLevels.DINNER
				} else if (periodLevels.OTHER) {
					baseLevel = periodLevels.OTHER
				}

				// 添加随机波动 (-0.5 到 +0.5)，使数据更真实
				const randomOffset = (Math.random() - 0.5)
				let level = Math.round(baseLevel + randomOffset)

				// 确保在1-5范围内
				level = Math.max(1, Math.min(5, level))

				hourlyData.push({
					label: `${hour}:00`,
					value: level
				})
			}

			return hourlyData
		}
	},

	onLoad(options) {
		if (options.id) {
			this.locationId = parseInt(options.id)
			this.loadLocationDetail()
			this.loadDishes()
			this.loadCongestion()
			this.loadMyRating()
		} else {
			uni.showToast({
				title: '地点ID缺失',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	},

	methods: {
		/**
		 * 加载地点详情
		 */
		async loadLocationDetail() {
			try {
				const response = await locationAPI.getLocationById(this.locationId)
				if (response.success) {
					this.locationInfo = response.data
				}
			} catch (error) {
				console.error('加载地点详情失败:', error)
				utils.handleError(error, '加载地点详情失败')
			}
		},

		/**
		 * 加载推荐菜品
		 */
		async loadDishes() {
			try {
				const response = await locationAPI.getLocationDishes(this.locationId)
				if (response.success) {
					this.dishes = response.data
				}
			} catch (error) {
				console.error('加载菜品失败:', error)
			}
		},

		/**
		 * 加载拥挤度数据
		 */
		async loadCongestion() {
			try {
				const response = await locationAPI.getLocationCongestion(this.locationId)
				if (response.success) {
					this.congestion = response.data
				}
			} catch (error) {
				console.error('加载拥挤度失败:', error)
			}
		},

		/**
		 * 加载我的评分
		 */
		async loadMyRating() {
			const token = uni.getStorageSync('token')
			if (!token) return

			try {
				const response = await ratingAPI.getMyRating(this.locationId)
				if (response.success && response.data) {
					this.myRating = response.data
					this.tempRating = response.data.score
				}
			} catch (error) {
				console.error('加载我的评分失败:', error)
			}
		},

		/**
		 * 切换Tab
		 */
		switchTab(index) {
			this.currentTab = index
		},

		/**
		 * 获取时段名称
		 */
		getPeriodName(period) {
			const map = {
				BREAKFAST: '早餐时段',
				LUNCH: '午餐时段',
				DINNER: '晚餐时段',
				OTHER: '其他时段'
			}
			return map[period] || period
		},

		/**
		 * 获取拥挤度文本
		 */
		getLevelText(level) {
			const texts = ['', '很空闲', '较空闲', '适中', '较拥挤', '非常拥挤']
			return texts[level] || '未知'
		},

		/**
		 * 获取拥挤度样式类
		 */
		getLevelClass(level) {
			if (level <= 2) return 'level-low'
			if (level <= 3) return 'level-medium'
			return 'level-high'
		},

		/**
		 * 点击星星评分
		 */
		handleStarTap(star) {
			this.tempRating = star
		},

		/**
		 * 提交评分
		 */
		async submitRating() {
			// 检查登录
			const token = uni.getStorageSync('token')
			if (!token) {
				this.showLoginPrompt()
				return
			}

			if (this.tempRating === 0) {
				uni.showToast({
					title: '请先选择评分',
					icon: 'none'
				})
				return
			}

			this.isSubmitting = true
			try {
				const response = await ratingAPI.rateLocation(this.locationId, {
					score: this.tempRating
				})

				if (response.success) {
					uni.showToast({
						title: '评分成功',
						icon: 'success'
					})

					// 重新加载数据
					this.loadLocationDetail()
					this.loadMyRating()
				}
			} catch (error) {
				console.error('评分失败:', error)
				utils.handleError(error, '评分失败')
			} finally {
				this.isSubmitting = false
			}
		},

		/**
		 * 删除我的评分
		 */
		async deleteMyRating() {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除你的评分吗?',
				success: async (res) => {
					if (res.confirm) {
						try {
							const response = await ratingAPI.deleteRating(this.locationId)
							if (response.success) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})

								this.myRating = null
								this.tempRating = 0
								this.loadLocationDetail()
							}
						} catch (error) {
							console.error('删除评分失败:', error)
							utils.handleError(error, '删除评分失败')
						}
					}
				}
			})
		},

		/**
		 * 显示添加菜品表单
		 */
		showAddDishForm() {
			// 检查登录
			const token = uni.getStorageSync('token')
			if (!token) {
				this.showLoginPrompt()
				return
			}

			this.showDishForm = true
		},

		/**
		 * 获取完整图片URL
		 */
		getFullImageUrl(relativeUrl) {
			if (!relativeUrl) return ''
			if (relativeUrl.startsWith('http')) return relativeUrl

			// 使用后端基础域名拼接完整URL
			return `${this.assetBaseUrl}${relativeUrl}`
		},

		/**
		 * 选择图片
		 */
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], // 压缩图片
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.dishForm.imageUrl = res.tempFilePaths[0]
					this.dishForm.imageFile = res.tempFiles[0]
				},
				fail: () => {
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					})
				}
			})
		},

		/**
		 * 删除图片
		 */
		removeImage() {
			this.dishForm.imageUrl = ''
			this.dishForm.imageFile = null
		},

		/**
		 * 预览图片
		 */
		previewImage(relativeUrl) {
			const fullUrl = this.getFullImageUrl(relativeUrl)
			uni.previewImage({
				urls: [fullUrl],
				current: fullUrl
			})
		},

		/**
		 * 关闭菜品表单
		 */
		closeDishForm() {
			this.showDishForm = false
			this.dishForm = {
				dishName: '',
				floor: '',
				price: '',
				imageUrl: '',
				imageFile: null
			}
		},

		/**
		 * 提交菜品
		 */
		async submitDish() {
			if (!this.dishForm.dishName) {
				uni.showToast({
					title: '请输入菜品名称',
					icon: 'none'
				})
				return
			}

			const token = uni.getStorageSync('token')
			if (!token) {
				this.showLoginPrompt()
				return
			}

			this.isSubmitting = true

			// 如果有图片，使用 uploadFile；否则使用普通请求
			if (this.dishForm.imageFile) {
				uni.showLoading({ title: '上传中...' })

				uni.uploadFile({
					url: `${this.apiBaseUrl}/locations/${this.locationId}/dishes`,
					filePath: this.dishForm.imageUrl,
					name: 'image',
					formData: {
						dishName: this.dishForm.dishName,
						floor: this.dishForm.floor || '',
						price: this.dishForm.price || ''
					},
					header: {
						'Authorization': `Bearer ${token}`
					},
					success: (uploadRes) => {
						uni.hideLoading()

						try {
							const data = JSON.parse(uploadRes.data)
							if (data.success) {
								uni.showToast({ title: '添加成功', icon: 'success' })
								this.closeDishForm()
								this.loadDishes()
							} else {
								uni.showToast({
									title: data.message || '添加失败',
									icon: 'none'
								})
							}
						} catch (error) {
							console.error('解析响应失败:', error)
							uni.showToast({ title: '添加失败', icon: 'none' })
						}
					},
					fail: (error) => {
						uni.hideLoading()
						console.error('上传失败:', error)
						uni.showToast({ title: '上传失败，请重试', icon: 'none' })
					},
					complete: () => {
						this.isSubmitting = false
					}
				})
			} else {
				// 无图片时使用原有逻辑
				try {
					const data = {
						dishName: this.dishForm.dishName,
						floor: this.dishForm.floor || undefined,
						price: this.dishForm.price ? parseFloat(this.dishForm.price) : undefined
					}

					const response = await locationAPI.addRecommendedDish(this.locationId, data)

					if (response.success) {
						uni.showToast({ title: '添加成功', icon: 'success' })
						this.closeDishForm()
						this.loadDishes()
					}
				} catch (error) {
					console.error('添加菜品失败:', error)
					utils.handleError(error, '添加菜品失败')
				} finally {
					this.isSubmitting = false
				}
			}
		},

		/**
		 * 显示登录提示
		 */
		showLoginPrompt() {
			uni.showModal({
				title: '提示',
				content: '请先登录后再进行操作',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
/* 容器 */
.detail-container {
	width: 100vw;
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/* 顶部地点信息 */
.location-header {
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	padding: 40rpx 40rpx 48rpx;
	color: #ffffff;
}

.header-content {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.location-name {
	font-size: 48rpx;
	font-weight: bold;
}

.rating-section {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.rating-stars {
	display: flex;
	gap: 8rpx;
}

.star {
	font-size: 36rpx;
	color: rgba(255, 255, 255, 0.3);
}

.star.filled {
	color: #fbbf24;
}

.rating-value {
	font-size: 32rpx;
	font-weight: 500;
}

.rating-count {
	font-size: 24rpx;
	opacity: 0.8;
}

/* Tab切换 */
.tabs {
	display: flex;
	background: #ffffff;
	border-bottom: 2rpx solid #e5e7eb;
}

.tab-item {
	flex: 1;
	padding: 32rpx 0;
	text-align: center;
	position: relative;
}

.tab-item.active .tab-text {
	color: #22c55e;
	font-weight: 500;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20%;
	right: 20%;
	height: 4rpx;
	background: #22c55e;
	border-radius: 2rpx 2rpx 0 0;
}

.tab-text {
	font-size: 28rpx;
	color: #6b7280;
}

/* 内容区 */
.content-scroll {
	flex: 1;
	height: 0;
}

.tab-content {
	padding: 32rpx;
	min-height: 100%;
}

/* 推荐菜品 */
.dishes-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	margin-bottom: 32rpx;
}

.dish-item {
	background: #ffffff;
	padding: 32rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: flex-start;
	gap: 24rpx;
}

/* 菜品图片 */
.dish-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
}

.dish-image-placeholder {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dish-image-placeholder text {
	font-size: 22rpx;
	color: #999;
}

.dish-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.dish-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #1f2937;
}

.dish-meta {
	display: flex;
	gap: 16rpx;
	align-items: center;
}

.dish-floor {
	font-size: 24rpx;
	color: #6b7280;
	padding: 4rpx 12rpx;
	background: #f3f4f6;
	border-radius: 8rpx;
}

.dish-price {
	font-size: 28rpx;
	color: #ef4444;
	font-weight: 500;
}

.dish-author {
	font-size: 24rpx;
	color: #9ca3af;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #6b7280;
	margin-bottom: 12rpx;
}

.empty-hint {
	font-size: 24rpx;
	color: #9ca3af;
}

/* 添加按钮 */
.add-dish-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 16rpx;
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.3);
}

.add-dish-btn:active {
	opacity: 0.8;
}

/* 拥挤度 */
.period-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #1f2937;
	margin: 48rpx 0 24rpx;
	padding-left: 8rpx;
	border-left: 6rpx solid #22c55e;
}

.congestion-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.congestion-item {
	background: #ffffff;
	padding: 32rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.congestion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.period-name {
	font-size: 28rpx;
	color: #1f2937;
	font-weight: 500;
}

.level-text {
	font-size: 24rpx;
	color: #6b7280;
}

.level-bar {
	height: 16rpx;
	background: #e5e7eb;
	border-radius: 8rpx;
	overflow: hidden;
}

.level-fill {
	height: 100%;
	border-radius: 8rpx;
	transition: width 0.3s ease;
}

.level-fill.level-low {
	background: #22c55e;
}

.level-fill.level-medium {
	background: #fbbf24;
}

.level-fill.level-high {
	background: #ef4444;
}

/* 我的评分 */
.my-rating-section {
	background: #ffffff;
	padding: 48rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section-title {
	font-size: 32rpx;
	color: #1f2937;
	font-weight: 500;
	margin-bottom: 48rpx;
}

.star-rating {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.rating-star {
	font-size: 72rpx;
	color: #e5e7eb;
	cursor: pointer;
	transition: all 0.2s ease;
}

.rating-star.active {
	color: #fbbf24;
}

.rating-hint {
	font-size: 24rpx;
	color: #6b7280;
	margin-bottom: 48rpx;
}

.submit-rating-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 16rpx;
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.3);
}

.submit-rating-btn[disabled] {
	opacity: 0.5;
}

.current-rating {
	margin-top: 48rpx;
	padding-top: 48rpx;
	border-top: 2rpx solid #e5e7eb;
	width: 100%;
	text-align: center;
}

.rating-label {
	display: block;
	font-size: 24rpx;
	color: #6b7280;
	margin-bottom: 12rpx;
}

.rating-score {
	display: block;
	font-size: 48rpx;
	color: #22c55e;
	font-weight: bold;
	margin-bottom: 24rpx;
}

.delete-rating-btn {
	width: 240rpx;
	height: 64rpx;
	background: transparent;
	color: #ef4444;
	font-size: 28rpx;
	border: 2rpx solid #ef4444;
	border-radius: 12rpx;
}

/* 弹窗 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.modal-content {
	background: #ffffff;
	border-radius: 32rpx 32rpx 0 0;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 40rpx;
	border-bottom: 2rpx solid #e5e7eb;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #1f2937;
}

.modal-close {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	color: #9ca3af;
}

.form-body {
	padding: 40rpx;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #374151;
	margin-bottom: 16rpx;
}

.form-input {
	width: 100%;
	height: 88rpx;
	padding: 0 24rpx;
	background: #f9fafb;
	border: 2rpx solid #e5e7eb;
	border-radius: 12rpx;
	font-size: 28rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 16rpx;
	border: none;
	margin-top: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.3);
}

.submit-btn[disabled] {
	opacity: 0.5;
}

/* 其他信息Tab - 青春校园风格 */
.campus-bg {
	background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.campus-header {
	margin-bottom: 32rpx;
	text-align: center;
}

.header-deco {
	display: inline-flex;
	align-items: center;
	gap: 12rpx;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	padding: 16rpx 40rpx;
	border-radius: 50rpx;
	box-shadow: 0 6rpx 20rpx rgba(34, 197, 94, 0.3);
	margin-bottom: 16rpx;
}

.deco-icon {
	font-size: 32rpx;
	animation: ring 2s ease-in-out infinite;
}

@keyframes ring {
	0%, 100% { transform: rotate(0deg); }
	10%, 30% { transform: rotate(-10deg); }
	20%, 40% { transform: rotate(10deg); }
}

.header-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
}

.header-subtitle {
	font-size: 24rpx;
	color: #6b7280;
	font-weight: 400;
}

/* 备注卡片列表 */
.notes-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.note-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid rgba(34, 197, 94, 0.1);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.note-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 8rpx;
	height: 100%;
	background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.note-card:active {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.note-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 20rpx;
}

.note-badge {
	width: 64rpx;
	height: 64rpx;
	border-radius: 16rpx;
	background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.15);
}

.badge-icon {
	font-size: 36rpx;
}

.note-category {
	font-size: 26rpx;
	font-weight: 600;
	color: #22c55e;
	background: rgba(34, 197, 94, 0.1);
	padding: 8rpx 20rpx;
	border-radius: 50rpx;
}

.note-body {
	padding-left: 80rpx;
	margin-bottom: 16rpx;
}

.note-text {
	font-size: 28rpx;
	line-height: 1.8;
	color: #1f2937;
	word-wrap: break-word;
}

.note-footer {
	padding-left: 80rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.note-time {
	font-size: 22rpx;
	color: #9ca3af;
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.note-time::before {
	content: '📅';
	font-size: 20rpx;
}

/* 空状态 - 校园风格 */
.empty-campus {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 0 80rpx;
}

.empty-decoration {
	position: relative;
	margin-bottom: 40rpx;
}

.empty-icon-large {
	font-size: 160rpx;
	display: block;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20rpx); }
}

.empty-dots {
	display: flex;
	gap: 12rpx;
	justify-content: center;
	margin-top: 20rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #22c55e;
	animation: bounce 1.4s ease-in-out infinite;
}

.dot:nth-child(2) {
	animation-delay: 0.2s;
	background: #16a34a;
}

.dot:nth-child(3) {
	animation-delay: 0.4s;
	background: #15803d;
}

@keyframes bounce {
	0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
	40% { transform: scale(1.2); opacity: 1; }
}

.empty-title {
	font-size: 34rpx;
	font-weight: 600;
	color: #374151;
	margin-bottom: 12rpx;
}

.empty-desc {
	font-size: 26rpx;
	color: #9ca3af;
	text-align: center;
	line-height: 1.6;
}

/* 上传组件样式 */
.upload-wrapper {
	margin-top: 16rpx;
}

.upload-btn {
	width: 200rpx;
	height: 200rpx;
	border: 2rpx dashed #ddd;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fafafa;
}

.upload-icon {
	font-size: 60rpx;
	color: #999;
	margin-bottom: 12rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #666;
}

.image-preview {
	position: relative;
	width: 200rpx;
	height: 200rpx;
}

.image-preview image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.delete-btn {
	position: absolute;
	top: -12rpx;
	right: -12rpx;
	width: 48rpx;
	height: 48rpx;
	background: #ff4d4f;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	line-height: 1;
}

.upload-tip {
	display: block;
	font-size: 22rpx;
	color: #999;
	margin-top: 12rpx;
}
</style>
